<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        
        .header {
            height: 100px;
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            background-color: red;
        }
        
        .footer {
            height: 100px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: turquoise;
        }
        
        .main {
            position: absolute;
            top: 100px;
            bottom: 100px;
            left: 0;
            right: 0;
            background-color: thistle;
        }
        
        .box {
            float: left;
        }
        
        .box1 {
            margin-left: -100%;
            width: 200px;
            height: 100%;
            background-color: yellowgreen;
        }
        
        .box2 {
            margin-left: -150px;
            width: 150px;
            height: 100%;
            background-color: slateblue;
        }
        
        .center {
            width: 100%;
            height: 100%;
        }
        
        .content {
            padding: 0 150px 0 200px;
            height: 100%;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="header"></div>
    <div class="main">
        <div class="box center">
            <div class="content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae nisi ut libero odit? Odio fugiat voluptates aperiam, dicta quia rerum ipsam nostrum neque necessitatibus, ipsa quibusdam quo temporibus odit beatae. Iusto error consequuntur esse cumque,
                molestiae fugiat soluta voluptas sint veniam cupiditate deserunt, sunt reiciendis, voluptatum inventore est. Illum doloribus incidunt nostrum maxime porro suscipit eveniet iusto architecto itaque repellat. Fugit totam amet harum magni,
                tempora debitis praesentium voluptatem! Est incidunt tenetur commodi corrupti dolor odit in, nisi ducimus beatae deleniti sunt ad reiciendis eligendi ratione, quae possimus! Assumenda, architecto? Consequatur similique reprehenderit, asperiores
                ipsam, dolore incidunt nostrum sint, alias iste quis harum. Ipsa error beatae facilis illo officia, similique placeat possimus vero repudiandae in nobis? Velit ducimus quisquam amet. Enim iusto quae pariatur modi ut impedit atque officiis
                ad laudantium ratione, voluptatem ipsa nemo id, doloremque autem vitae eos amet corporis beatae nobis eligendi quibusdam minima. Minus, dolorem molestias! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque provident tempora,
                tempore facilis ullam inventore cum necessitatibus non, repellendus eum ad voluptatibus enim neque ea quam quisquam laborum unde ipsam.Doloribus, culpa ratione iure voluptas quae impedit odit dignissimos consectetur velit aperiam dolore
                quasi aspernatur ut, dolorum exercitationem, placeat iusto molestiae temporibus. Placeat temporibus animi quas quod quasi in ullam!
            </div>
        </div>
        <div class="box box1"></div>
        <div class="box box2"></div>
    </div>
    <div class="footer"></div>
</body>

</html>